<template>
  <view class="skill-counter">
    <u-navbar
      @rightClick="rightClick"
      title="技能中心"
      bgColor="#4facfe"
      rightText="变更记录"
      leftIconColor="#fff"
      autoBack
      :titleStyle="{
        color: '#fff',
      }"
    />
    <view class="skill-content-counter">
      <view class="top-certificate-skill">
        <view class="certificate-skill-items" @click="handleCertificate">
          <text class="iconfont icon-certificate"></text>
          <text class="skill-text">证书管理</text>
        </view>
        <view class="certificate-skill-items">
          <text class="iconfont icon-selective"></text>
          <text class="skill-text">严选技能</text>
        </view>
      </view>
      <!-- content -->
      <view class="skill-content-main">
        <view class="top-tabs-main">
          <view
            class="tabs-items"
            :class="{ active: activeTabs == 0 }"
            @click="handleChangeTabs(0)"
            >已验证可接单(87)</view
          >
          <view
            class="tabs-items"
            :class="{ active: activeTabs == 1 }"
            @click="handleChangeTabs(1)"
            >待验证/审核不可接单(72)</view
          >
        </view>
        <view class="tabs-content-main">
          <view class="content-left-counter">
            <view
              class="left-menu-items"
              v-for="item in leftMenu"
              :key="item.id"
              :class="{ active: item.id == selectLeftMenu }"
              @click="handleChangeLeftMenu(item)"
              >{{ item.name }}</view
            >
          </view>
          <view class="content-right-counter">
            <view v-if="rightContentList.length > 0">
              <view
                class="right-content-items"
                v-for="item in rightContentList"
                :key="item.id"
              >
                <view class="content-title">{{ item.title }}</view>
                <view class="items-child-main">
                  <view
                    class="child-items"
                    :class="{
                      openDelete: deleteSkillFlag,
                      active: selectDeleteItems.includes(childItem.id),
                    }"
                    v-for="childItem in item.children"
                    :key="childItem.id"
                    @click="handleSelectNeedDelete(childItem)"
                    >{{ childItem.name }}</view
                  >
                </view>
              </view>
            </view>
            <view v-else class="none-data-main">
              <image src="../../../static/images/none-data.png" />
              <view class="none-explain">暂无不可接单的技能</view>
            </view>
          </view>
        </view>
      </view>
      <!-- bottom -->
      <view class="bottom-main">
        <!-- 移除/添加 技能 -->
        <view class="delete-add-skill-btn" v-if="!deleteSkillFlag">
          <view class="delete-btn" @click="deleteSkillFlag = true">
            <u-icon name="minus" color="#9f9f9f" size="18"></u-icon>
            <text>移除技能</text>
          </view>
          <view
            class="delete-btn add-btn"
            v-if="activeTabs == 0"
            @click="handleAddSkill"
          >
            <u-icon name="plus" color="#52aada" size="18"></u-icon>
            <text class="add-ski">添加技能</text>
          </view>
          <view
            class="delete-btn add-btn"
            v-if="activeTabs == 1"
            @click="handleVerifySkill"
          >
            <u-icon name="plus" color="#52aada" size="18"></u-icon>
            <text class="add-ski">验证技能</text>
          </view>
        </view>
        <!-- 移除技能展示 -->
        <view v-else class="delete-skill-counter">
          <view class="left-select-count">已选{{ selectLength }}项</view>
          <view class="right-control-btn">
            <view class="control-btn cancel-btn" @click="handleCancelEdit"
              >取消编辑</view
            >
            <view class="control-btn" @click="handleConfirmDelete"
              >确认移除</view
            >
          </view>
        </view>
      </view>
    </view>
    <!-- 确定移除弹窗 -->
    <u-popup
      round="6"
      :show="showConfirmDeletePopup"
      mode="center"
      @close="closeConfirmDeletePopup"
    >
      <view class="confirm-delete-popup-counter">
        <view class="popup-title">温馨提示</view>
        <view class="content-table">您的下列技能可直接移除</view>
        <view class="content-table content">
          {{ selectDeleteItemName.join("，") }}
        </view>
        <view class="confirm-btn" @click="handleConfirm">确认</view>
      </view>
    </u-popup>

    <!-- 验证技能 -->
    <VerifySkill :show.sync="showVerify" />
  </view>
</template>

<script>
import VerifySkill from "./component/VerifySkill.vue";
import { serviceSort, workSkill } from "@/api/skill";
export default {
  components: {
    VerifySkill,
  },
  data() {
    return {
      activeTabs: 0,
      leftMenu: [],
      rightContentList: [
        {
          id: 1,
          title: "维修服务",
          children: [
            { id: "1-1", name: "柜类维修" },
            { id: "1-2", name: "屏风类维修" },
            { id: "1-3", name: "家居类维修服务-办公家具维修" },
            { id: "1-4", name: "楼梯类维修" },
            { id: "1-5", name: "柜类维修" },
            { id: "1-6", name: "柜类维修" },
            { id: "1-7", name: "柜类维修" },
            { id: "1-8", name: "柜类维修" },
          ],
        },
      ],
      selectLeftMenu: '', // 选中的左边菜单
      deleteSkillFlag: false, // 判断是否需要移除技能
      selectDeleteItems: [], // 已选中需要移除的技能id
      selectDeleteItemName: [], // 已选中需要移除的技能name
      selectMap: new Map(), // 初始化一个空的 Map,操作选中删除技能时需要
      showConfirmDeletePopup: false,
      showVerify: false,
    };
  },
  computed: {
    selectLength() {
      return this.selectDeleteItems.length;
    },
  },
  mounted() {
    this.getServiceSort();
  },
  methods: {
    // 获取服务分类
    async getServiceSort() {
      try {
        const res = await serviceSort();
        console.log(res, "=====");
        this.leftMenu = res.data;
        this.selectLeftMenu = this.leftMenu?.[0]?.id;
        this.getWorkSkill();
      } catch (e) {
        console.log(e);
      }
    },
    // 获取师傅技能
    async getWorkSkill() {
      try {
        const res = await workSkill({
          classifyId: this.selectLeftMenu,
        });
        console.log(res,'==');
        
      } catch (e) {
        console.log(e);
      }
    },
    // 变更记录
    rightClick() {},
    // chang tabs
    handleChangeTabs(active) {
      this.activeTabs = active;
    },
    // 选择左边菜单
    handleChangeLeftMenu(item) {
      this.selectLeftMenu = item.id;
      this.getWorkSkill();
    },
    // 选择需要移除的技能
    handleSelectNeedDelete(item) {
      if (!this.deleteSkillFlag) return;
      if (this.selectMap.has(item.id)) {
        this.selectMap.delete(item.id);
      } else {
        this.selectMap.set(item.id, item.name);
      }
      this.selectDeleteItems = Array.from(this.selectMap.keys());
      this.selectDeleteItemName = Array.from(this.selectMap.values());
    },
    // 取消编辑
    handleCancelEdit() {
      this.deleteSkillFlag = false;
      this.selectDeleteItems = [];
      this.selectDeleteItemName = [];
      this.selectMap.clear();
    },
    // 关闭弹窗
    closeConfirmDeletePopup() {
      this.showConfirmDeletePopup = false;
    },
    // 确认移除
    handleConfirmDelete() {
      if (!this.selectDeleteItemName.length) {
        return uni.showToast({
          title: "请您先选择移除技能",
          icon: "none",
          duration: 3000,
        });
      }
      this.showConfirmDeletePopup = true;
    },
    // 确认
    handleConfirm() {
      this.showConfirmDeletePopup = false;
      this.handleCancelEdit();
    },
    // 验证技能
    handleVerifySkill() {
      this.showVerify = true;
    },
    // 添加技能呢
    handleAddSkill() {
      uni.navigateTo({
        url: "/pages/drawerPage/skill/selectiveCategory",
      });
    },
    // 证书管理
    handleCertificate() {
      uni.navigateTo({
        url: "/pages/drawerPage/skill/certificate",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.skill-counter {
  ::v-deep .u-navbar__content__right__text {
    color: #fff;
  }
  .skill-content-counter {
    /* #ifdef APP */
    margin-top: 145rpx;
    height: calc(100vh - 145rpx);
    /* #endif */
    /* #ifndef APP */
    margin-top: 88rpx;
    height: calc(100vh - 88rpx);
    /* #endif */
    // background: linear-gradient(180deg, #4294f6 0%, #62acf5, 10%, #f6f6f6 100%);
    background: linear-gradient(to bottom, #4facfe, #f6f6f6, #f6f6f6);
    padding: 20rpx;
    box-sizing: border-box;
    .top-certificate-skill {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx 12rpx 0 12rpx;
      .certificate-skill-items {
        display: flex;
        align-items: center;
        gap: 8rpx;
        padding: 20rpx 82rpx;
        background: #71b6f7;
        border-radius: 8rpx;
        .icon-certificate {
          color: #fff;
          font-size: 32rpx;
        }
        .icon-selective {
          color: #fff;
          font-size: 32rpx;
        }
        .skill-text {
          color: #fff;
          font-size: 28rpx;
        }
      }
    }
    .skill-content-main {
      margin-top: 36rpx;
      height: calc(100vh - 356rpx);
      background: #fff;
      border-radius: 12rpx;
      .top-tabs-main {
        padding: 20rpx 72rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 2rpx solid #eee;
        .tabs-items {
          font-size: 26rpx;
          color: #999;
          &.active {
            color: #51aee5;
            font-weight: bold;
            position: relative;
            &::after {
              content: "";
              width: 60rpx;
              height: 8rpx;
              border-radius: 50rpx;
              background: #51aee5;
              position: absolute;
              left: calc(50% - 30rpx);
              bottom: -14rpx;
            }
          }
        }
      }
      .tabs-content-main {
        display: flex;
        .content-left-counter {
          width: 194rpx;
          border-right: 2rpx solid #eee;
          height: calc(100vh - 480rpx);
          overflow: auto;
          padding-bottom: 24rpx;
          .left-menu-items {
            padding: 28rpx 0 28rpx 28rpx;
            font-size: 26rpx;
            color: #999;
            &.active {
              color: #51aee5;
              font-weight: bold;
            }
          }
        }
        .content-right-counter {
          flex: 1;
          padding: 0 28rpx 28rpx;
          height: calc(100vh - 480rpx);
          overflow: auto;
          .right-content-items {
            margin-top: 28rpx;
            .content-title {
              font-size: 28rpx;
              color: #000;
              font-weight: 500;
              margin-bottom: 12rpx;
            }
            .items-child-main {
              display: flex;
              align-items: flex-start;
              flex-wrap: wrap;
              gap: 18rpx;
              .child-items {
                width: 136rpx;
                padding: 20rpx 8rpx;
                box-sizing: border-box;
                font-size: 24rpx;
                color: #999;
                text-align: center;
                border-radius: 8rpx;
                border: 2rpx solid transparent;
                &.openDelete {
                  background: #f7f9f9;
                }
                &.active {
                  border-color: #579af8;
                  color: #579af8;
                  background: #ebf8fe;
                }
              }
            }
          }
          .none-data-main {
            display: flex;
            flex-direction: column;
            gap: 10rpx;
            justify-content: center;
            align-items: center;
            margin-top: 280rpx;
            image {
              width: 204rpx;
              height: 204rpx;
            }
            .none-explain {
              color: #999;
              font-size: 26rpx;
            }
          }
        }
      }
    }
    .bottom-main {
      width: 100%;
      height: 100rpx;
      position: fixed;
      left: 0;
      bottom: 0;
      background: #fff;
      .delete-add-skill-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 100rpx;
        box-sizing: border-box;
        .delete-btn {
          display: flex;
          align-content: center;
          gap: 20rpx;
          padding: 24rpx 0;
          text {
            font-size: 30rpx;
            color: #9f9f9f;
          }
          .add-ski {
            color: #51aee5;
          }
        }
        .add-btn {
          position: relative;
          &::before {
            content: "";
            width: 2rpx;
            height: 24rpx;
            background: #e5e5e5;
            position: absolute;
            left: -52rpx;
            top: 34rpx;
          }
        }
      }
      .delete-skill-counter {
        padding: 12rpx 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left-select-count {
          font-size: 28rpx;
        }
        .right-control-btn {
          display: flex;
          align-items: center;
          gap: 24rpx;
          .control-btn {
            padding: 14rpx 32rpx;
            font-size: 26rpx;
            color: #fff;
            background: #4ac8ea;
            border-radius: 8rpx;
          }
          .cancel-btn {
            border: 2rpx solid #4ac8ea;
            color: #4ac8ea;
            background: #fff;
          }
        }
      }
    }
  }
  .confirm-delete-popup-counter {
    padding: 52rpx 32rpx;
    box-sizing: border-box;
    .popup-title {
      font-size: 32rpx;
      color: #000;
      font-weight: 500;
      text-align: center;
      margin-bottom: 40rpx;
    }
    .content-table {
      width: 470rpx;
      padding: 20rpx;
      box-sizing: border-box;
      border: 2rpx solid #ebebeb;
      font-size: 24rpx;
      color: #999;
    }
    .content {
      border-top: none;
      color: #333;
    }
    .confirm-btn {
      width: 470rpx;
      padding: 20rpx 0;
      background: #4da9ea;
      font-size: 28rpx;
      color: #fff;
      text-align: center;
      box-sizing: border-box;
      border-radius: 12rpx;
      margin-top: 40rpx;
    }
  }
}
</style>
